<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>团队管理</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/teams.css">
</head>
<body>

<!-- 主体结构 -->
<main class="page-layout">

    <!-- 工具面板 -->
    <aside class="tool-panel">
        <!-- 成员角色筛选 -->
        <section class="role-filter">
            <h2>筛选条件</h2>
            <select id="roleSelect" class="filter-select">
                <option value="">所有角色</option>
                <option value="管理员">管理员</option>
                <option value="设计师">设计师</option>
                <option value="开发人员">开发人员</option>
            </select>
            <button class="add-member-btn">+ 添加新成员</button>
        </section>
    </aside>

    <!-- 工作区：主内容 -->
    <section class="workspace">
        <h1 class="page-title">团队管理</h1>
        
        <!-- 成员卡片区域 -->
        <div class="team-members" id="teamMembers">
            <!-- 卡片模板 -->
            <div class="member-card" data-role="管理员">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.g5M-iZUiocFCi9YAzojtRAAAAA?rs=1&pid=ImgDetMain" alt="成员头像" class="member-avatar" style="height:100px;width: 100px;">
                <div class="member-info">
                    <h3 class="member-name">马天宝</h3>
                    <p class="member-role">管理员</p>
                    <p class="member-email">zhangsan@example.com</p>
                    <p class="member-last-login">最后登录: 2024-07-10 09:00</p>
                </div>
            </div>
            <div class="member-card" data-role="设计师">
                <img src="https://c-ssl.duitang.com/uploads/item/202008/18/20200818183824_HcHJZ.jpeg" alt="成员头像" class="member-avatar" style="height:100px;width: 100px;">
                <div class="member-info">
                    <h3 class="member-name">张立通</h3>
                    <p class="member-role">设计师</p>
                    <p class="member-email">lisi@example.com</p>
                    <p class="member-last-login">最后登录: 2024-07-10 08:30</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 侧边栏 -->
    <aside class="side-panel">
        <!-- 快速操作 -->
        <section class="quick-actions">
            <h3>快捷操作</h3>
            <ul class="action-list">
                <li><a href="#" class="action-btn">刷新成员状态</a></li>
                <li><a href="#" class="action-btn">导出成员列表</a></li>
            </ul>
        </section>
    </aside>

</main>

<!-- JavaScript 脚本 -->
<script>
    // 筛选成员角色
    document.getElementById('roleSelect').addEventListener('change', function() {
        const selectedRole = this.value;
        const memberCards = document.querySelectorAll('.member-card');
        memberCards.forEach(card => {
            if (selectedRole === "" || card.getAttribute('data-role') === selectedRole) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });

    // 添加新成员示例
    document.querySelector('.add-member-btn').addEventListener('click', function() {
        alert('模拟新增成员功能');
        // 实际应用中可以打开一个模态框或跳转到新增成员页面
    });
</script>

</body>
</html>